import { defineDirective } from "@/shared/tools.mjs";

export const EgPaneDirective = defineDirective(() => ({
  restrict: "E",
  transclude: true,
  scope: { title: `@${camelCase("mz-title")}` },
  template: html`
    <div class="border border-solid border-black" mz-desc="Directive-EgPane">
      <div class="text-gray-400">{{ title }}</div>
      <ng-transclude></ng-transclude>
    </div>
  `,
}));

export const MultiSlotEgPaneDirective = defineDirective(() => ({
  restrict: "E",
  transclude: {
    title: `?${camelCase("eg-pane-title")}`,
    body: camelCase("eg-pane-body"),
    footer: `?${camelCase("eg-pane-footer")}`,
  },
  template: html`
    <div class="border border-solid border-black">
      <div class="multiTitle" ng-transclude="title">Fallback Title</div>
      <ng-transclude ng-transclude-slot="body"></ng-transclude>
      <div class="multiFooter" ng-transclude="footer">Fallback Footer</div>
    </div>
  `,
}));
